<style>
.order-elem-quote{
    height: 10px;
    line-height: 10px;
    font-size: 18px;
    font-weight: 600;
    background: #fff;
    padding: 5px;
}
.item-content{
    font-weight: 600;
}
.patient_info{
    display: flex;
}
.patient_content{
    width: 100%;
    margin-left: 10px;
    padding: 5px;
}
.patient_content_item{
    font-size: 14px;
    padding-left: 15px;
}
.service_num{
    border-radius: 2px;
    background-color: rgba(31,204,147,0.14);
    color: rgba(31,204,147,1);
    font-size: 12px;
    padding: 0 6px;
    text-align: center;
    margin-top: 7px;
}
.p_name{
    font-size: 18px;
    font-weight: 600;
}
.p_sex_age{
    font-size: 14px;
    color: rgba(167,172,177,1);
}
</style>
<div class="layui-card-body padding-15 layui-bg-gray">
    <div class="layui-panel padding-15">
        <blockquote class="layui-elem-quote order-elem-quote">
            患者信息
        </blockquote>
        <div class="layui-row patient_info">
            <div class="patient_header">
                <img src="/images/patient_header.png" style="width: 68px;height: 68px;border-radius: 50%">
            </div>
            <div class="layui-row" style="width: 100%">
                <div class="layui-col-xs12">
                    <div class="layui-row patient_content">
                        <div class="layui-col-xs4" style="font-size: 18px;font-weight: 600;">
                            [[${patient.name}]]
                        </div>
                        <div class="layui-col-xs7" style="font-size: 18px;text-align: right;">
                            <th:block th:switch="${data.orderStatus}">
                                <th:block th:case="-1">
                                    <span class="layui-font-gray">已取消</span>
                                </th:block>
                                <th:block th:case="0">
                                    <span class="layui-font-blue">待确认</span>
                                </th:block>
                                <th:block th:case="1">
                                    <span class="layui-font-blue">等待签订合同</span>
                                </th:block>
                                <th:block th:case="2">
                                    <span class="layui-font-green">服务中</span>
                                </th:block>
                                <th:block th:case="3">
                                    <span class="layui-font-orange">等待充值</span>
                                </th:block>
                                <th:block th:case="4">
                                    <span class="layui-font-orange">服务完成 待评价</span>
                                </th:block>
                                <th:block th:case="5">
                                    <span class="layui-badge layui-bg-green">服务完成 已评价</span>
                                </th:block>
                            </th:block>

                        </div>
                    </div>
                    <div class="layui-row patient_content_item">
                        <div class="layui-col-xs2">
                            <p>病区：<span class="item-content">[[${data.depId}]]</span></p>
                        </div>
                        <div class="layui-col-xs2">
                            <p>患者床号：<span class="item-content">[[${data.bedNo}]]</span></p>
                        </div>
                        <div class="layui-col-xs2">
                            <p>患者性别：
                                <span class="item-content" th:if="${patient.sex == 1}" >男</span>
                                <span class="item-content" th:if="${patient.sex == 2}" >女</span>
                            </p>
                        </div>
                        <div class="layui-col-xs2">
                            <p>手机号码：<span class="item-content">[[${patient.phone}]]</span></p>
                        </div>
                        <div class="layui-col-xs2">
                            <p>身份证号：<span class="item-content">[[${patient.cardNo}]]</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <blockquote class="layui-elem-quote order-elem-quote" style="margin-top: 20px;display: flex;justify-content: space-between;">
            <div>订单信息</div>
            <div style="display: flex;margin-right: 20px;">
                <th:block th:if="${data.type == 1}">
                    <div style=" margin-right: 25px;font-weight: 500;"><p>总计服务次数：<span style="font-size: 24px">[[${data.num}]]次</span></p></div>
                </th:block>
                <div style="font-weight: 500;"><p>总计金额：<span style="font-size: 24px;color: red;font-style: italic;">￥[[${data.total}]]</span></p></div>


            </div>
        </blockquote>
        <div class="layui-row" style="padding: 20px;font-size: 14px;">
            <div class="layui-col-xs2">
                <p>订单编号：<span class="item-content">[[${data.sn}]]</span></p>
            </div>

            <th:block th:if="${data.type == 1}">
                <div class="layui-col-xs2">
                    <p>陪护项目：<span class="item-content">[[${data.projectTitle}]]</span></p>
                </div>
                <div class="layui-col-xs2">
                    <p>陪护类型：<span class="item-content">[[${data.projectStageName}]]</span></p>
                </div>
                <div class="layui-col-xs2">
                    <p>陪护价格：<span class="item-content">[[${data.price}]]</span></p>
                </div>
            </th:block>
            <th:block th:if="${data.type == 2 || data.type==3}">

                <div class="layui-col-xs2">
                    <p>陪护类型：
                        <span class="item-content" th:if="${data.type == 2}" >陪诊</span>
                        <span class="item-content" th:if="${data.type == 3}" >陪检</span>
                    </p>
                </div>

                <div class="layui-col-xs2">
                    <p>服务项目：<span class="item-content">[[${data.projectTitle}]]</span></p>
                </div>
                <div class="layui-col-xs2">
                    <p>服务时间：<span class="item-content">[[${data.timeStart}]]</span></p>
                </div>

            </th:block>

            <div class="layui-col-xs2">
                <p>下单时间：<span class="item-content">[[${createTimeStr}]]</span></p>
            </div>


            <div class="layui-col-xs2">
                <p>服务公司：<span class="item-content">[[${data.companyName}]]</span></p>
            </div>
        </div>
        <div class="layui-row" style="display: flex;padding-left: 20px;font-size: 14px;">
            <div style="width: 120px">
                <p>服务护工：</p>
            </div>
            <div>
                <div class="layui-panel" style="width: 450px;float: left;margin-right: 20px;margin-bottom: 10px" th:each="item: ${orderPorters}">
                    <div style="display: flex;padding: 10px;justify-content: space-between">
                        <div style="margin-right: 10px;display: flex;">
                            <img style="width: 58px;height: 58px;border-radius: 50%;margin-right: 10px" th:src="${item.porter?.headimg}">
                            <div style="padding: 5px">
                                <p>
                                    <span class="p_name" th:text="${item.porter?.name}"></span>
                                    <span class="p_sex_age" th:if="${item.porter?.sex == 1}">男 [[${item.porter?.age}]]岁</span>
                                    <span class="p_sex_age" th:if="${item.porter?.sex == 2}">女 [[${item.porter?.age}]]岁</span>
                                </p>
                                <th:block th:if="${item.timeEnd!=null}">
                                    <p class="service_num">服务时间：[[${item.timeStarStr}]]至[[${item.timeEndStr}]]</p>
                                </th:block>
                                <th:block th:if="${item.timeEnd==null}">
                                    <p class="service_num">服务时间：[[${item.timeStarStr}]]</p>
                                </th:block>

                            </div>
                        </div>
                        <th:block th:if="${item.type!=1}">
                        <div style="padding: 10px">
                            <p class="layui-font-orange">[[${item.timeEndStr}]]</p>
                            <th:block th:switch="${item.type}">
                                <th:block th:case="3">
                                    <p class="layui-font-orange">公司主动申请更换</p>
                                </th:block>
                                <th:block th:case="2">
                                    <p class="layui-font-orange">患者申请更换</p>
                                </th:block>
                            </th:block>
                        </div>
                        </th:block>
                    </div>
                </div>




            </div>
        </div>
    </div>

    <div class="layui-panel padding-15" style="margin-top: 20px">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">服务日志</li>
                <li>服务投诉</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">

                    <div class="layui-timeline">

                        <div class="layui-timeline-item" th:each="item: ${orderLogs}">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div style="display: flex;justify-content: space-between;width: 326px;margin-bottom: 20px;">
                                    <h3 class="layui-timeline-title">[[${item.createTimeStr}]]</h3>
                                    <div style="display: flex">
                                        <img th:src="${item.porterImg}" style="width: 30px;height: 30px;border-radius: 50%">
                                        <h3>[[${item.porterName}]]</h3>
                                    </div>
                                </div>
                                <div id="ID-photos-demo">
                                    <th:block th:each="v : ${item.imgsList}">
                                        <img  th:src="${v}" style="width: 150px;height: 100px;margin-right: 20px">
                                    </th:block>
                                </div>
                            </div>
                        </div>

                    </div>

                    <script>
                        layui.use(function(){
                            var layer = layui.layer;
                            // 图片层
                            layer.photos({
                                photos: '#ID-photos-demo'
                            });
                        });
                    </script>
                </div>
                <div class="layui-tab-item">功能开发中...</div>
            </div>
        </div>
    </div>

</div>